import { Col, Row, Spin } from 'antd'
import { ComponentType, FC, LazyExoticComponent, Suspense } from 'react'

const LazyLoading = () => {
  return (
    <Row align="middle" justify="center" style={{ minHeight: '100%' }}>
      <Col>
        <Spin spinning />
      </Col>
    </Row>
  )
}

interface LazyImportProps {
  lazy?: LazyExoticComponent<ComponentType>
}

export const LazyImport: FC<LazyImportProps> = ({ lazy }) => {
  const Component = lazy ? lazy : () => null
  return (
    <Suspense fallback={<LazyLoading />}>
      <Component />
    </Suspense>
  )
}
